<template>
  <div class="card">
    <div class="card-header" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filterFrom">
        <el-form-item>
          <label>是否禁用</label>
          <el-select v-model="filterFrom.disable">
            <el-option label="全部" value=""></el-option>
            <el-option label="否" value="0"></el-option>
            <el-option label="是" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">确定</el-button>
        </el-form-item>
        <div class="pull-right">
          <el-button type="primary" icon="plus" @click="handleAdd">增加管理员</el-button>
        </div>
      </el-form>
    </div>
    <div class="card-body card-padding">
      <el-table :data="tableData" style="width: 100%" v-loading="isLoading" border>
        <el-table-column type="expand" width="40">
          <template scope="scope">
            <img v-if="scope.row.avatar" v-bind:src="scope.row.avatar" style="float: left;max-width:100px;height:75px;" />
            <div style="float: left;margin-left: 10px">
              <dl class="dl-horizontal">
                <dt>创建时间：</dt>
                <dd>{{scope.row.create_time}}</dd>
              </dl>
              <dl class="dl-horizontal">
                <dt>备注：</dt>
                <dd>{{scope.row.remark}}</dd>
              </dl>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" width="70"></el-table-column>
        <el-table-column prop="login_name" label="登录名" width="140"></el-table-column>
        <el-table-column prop="nickname" label="昵称" width="140"></el-table-column>
        <el-table-column prop="admin_name" label="创建者姓名" width="140"></el-table-column>
        <el-table-column prop="last_login" label="最近登录时间" width="200"></el-table-column>
        <el-table-column label="是否禁用" :formatter="disableFormatter" width="100"></el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button v-if="loginAdmin.id !== scope.row.id" size="small" type="primary" @click="handldDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <div style="float: left;margin-left: 20px;">
          <el-button type="text" @click="fetchData"><i class="zmdi zmdi-refresh" />&nbsp;&nbsp;重新加载</el-button>
        </div>
        <el-pagination :current-page="filterFrom.page_number" :page-sizes="[5, 10, 15, 20]" :page-size="filterFrom.page_size" layout="sizes, prev, pager, next, jumper,total"
          :total="totalSize" @size-change="handleSizeChange" @current-change="handlePageChange">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="管理员编辑" v-model="showDialog">
      <el-form v-model="cruAdmin" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="登录名">
              <el-input v-model="cruAdmin.login_name"></el-input>
            </el-form-item>
            <el-form-item label="密码" v-if="isAdd">
              <el-input v-model="cruAdmin.password"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="cruAdmin.nickname"></el-input>
            </el-form-item>
            <el-form-item label="是否禁用">
              <el-select style="width: 100%" v-model="cruAdmin.disable">
                <el-option label="否" :value="0"></el-option>
                <el-option label="是" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <img v-if="cruAdmin.avatar" v-bind:src="cruAdmin.avatar" style="width: 150px;height: 150px;margin-left: 40px">
          </el-col>
        </el-row>
        <el-form-item label="头像地址">
          <el-input v-model="cruAdmin.avatar"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="cruAdmin.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import API from '../../api'
  import utils from '../../utils'
  import crypto from 'crypto'

  var filterFrom = {
    page_number: 1,
    page_size: 10,
    disable: ''
  }

  export default {
    data: function () {
      return {
        isAdd: false,
        cruAdmin: {},
        isLoading: false,
        tableData: [],
        filterFrom,
        totalSize: 0,
        showDialog: false
      }
    },
    computed: {
      loginAdmin: function () {
        return this.$store.state.admin.info
      }
    },
    created: function () {
      this.fetchData()
    },
    methods: {
      handleSizeChange: function (val) {
        this.filterFrom.page_size = val
        this.fetchData()
      },
      handlePageChange: function (val) {
        this.filterFrom.page_number = val
        this.fetchData()
      },

      handleAdd: function () {
        this.isAdd = true
        this.showDialog = true
        this.cruAdmin = {
          'id': '',
          'login_name': '',
          'password': '',
          'nickname': '',
          'admin_id': '',
          'admin_name': '',
          'avatar': '',
          'disable': 0,
          'remark': ''
        }
      },

      // 编辑
      handleEdit: function (selectData) {
        this.isAdd = false
        this.showDialog = true
        this.cruAdmin = utils.object.deepClone(selectData)
      },
      handleSave: function () {
        if (this.cruAdmin.password) {
          this.cruAdmin.password = crypto.createHash('md5').update(this.cruAdmin.password).digest('hex')
        }
        API.adminSave(this.cruAdmin,
          (data) => {
            if (!data) return
            this.fetchData()
            this.showDialog = false
          }
        )
      },
      handldDelete: function (selectData) {
        this.$confirm('你将删除此管理员, 是否继续?', '提示', {
          closeOnClickModal: false,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          API.adminDelete({ id: selectData.id },
            (data) => {
              if (!data) return
              this.fetchData()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          )
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },

      fetchData: function () {
        this.isLoading = true
        API.adminList(this.filterFrom, (data) => {
          this.isLoading = false
          this.tableData = data.list
          this.totalSize = data.total_size
        })
      },
      disableFormatter: function (row) {
        switch (row.disable) {
          case 0: return '否'
          case 1: return '是'
          default: return ''
        }
      }
    }
  }

</script>

<style>
  dt {
    font-weight: normal
  }
</style>
